<template>
    <div class="containers main-box">
      <el-button type="success"
                 size="small"
                 icon="el-icon-zoom-in"
                 @click="zoomViewport(true)">放大</el-button>
      <el-button type="warning"
                 size="small"
                 icon="el-icon-zoom-out"
                 @click="zoomViewport(false)">缩小</el-button>
      <el-button type="info"
                 size="small"
                 icon="el-icon-rank"
                 @click="fitViewport">适中</el-button>
      <div class="canvas" ref="flowCanvas"></div>
    </div>
  </template>
  <script>
  import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
  
  export default {
    name: "FlowView",
    props: {
      flowData: {
        type: Object,
        default: () => {}
      },
    },
    data() {
      return {
        bpmnViewer: null
      };
    },
    watch: {
      flowData: {
        handler(newVal) {
          if (Object.keys(newVal).length > 0) {
            // 生成实例
            this.bpmnViewer && this.bpmnViewer.destroy();
            this.bpmnViewer = new BpmnViewer({
              container: this.$refs.flowCanvas,
              height: 'calc(100vh - 400px)',
            });
            this.loadFlowCanvas(newVal)
          }
        },
        immediate: true, // 立即生效
        deep: true  //监听对象或数组的时候，要用到深度监听
      }
    },
    mounted() {},
    methods: {
      // 加载流程图片
      async loadFlowCanvas(flowData) {
        const self = this
        try {
          await self.bpmnViewer.importXML(flowData.xmlData);
          self.fitViewport()
        } catch (err) {
          console.error(err.message, err.warnings)
        }
      },
      // 让图能自适应屏幕
      fitViewport() {
        this.zoom = this.bpmnViewer.get('canvas').zoom("fit-viewport", "auto")
      },
      // 放大缩小
      zoomViewport(zoomIn = true) {
        this.zoom = this.bpmnViewer.get('canvas').zoom()
        this.zoom += (zoomIn ? 0.1 : -0.1)
        if(this.zoom >= 0.2) this.bpmnViewer.get('canvas').zoom(this.zoom)
      },
    }
  };
  </script>
  <style lang="scss">
    .bjs-powered-by {
      display: none;
    }
    .view-mode {
      .el-header, .el-aside, .djs-palette, .bjs-powered-by {
        display: none;
      }
      .el-loading-mask {
        background-color: initial;
      }
      .el-loading-spinner {
        display: none;
      }
    }
    .containers {
      // background-color: #ffffff;
      width: 100%;
      height: 100%;
      .canvas {
        width: 100%;
        height: 100%;
      }
      .panel {
        position: absolute;
        right: 0;
        top: 50px;
        width: 300px;
      }
      .load {
        margin-right: 10px;
      }
      .el-form-item__label{
        font-size: 13px;
      }
  
      .djs-palette{
        left: 0px!important;
        top: 0px;
        border-top: none;
      }
  
      .djs-container svg {
        min-height: 650px;
      }
  
      .overlays-div {
        font-size: 10px;
        color: red;
        width: 100px;
        top: -20px !important;
      }
    }
  </style>
  